<template>
	<view class="zone">
		<Header title="提升战力" color="#fff"></Header>

		<view class="main">

			<scroll-view class="content" scroll-y>
				<view class="item" v-for="(item , index) in list" :key="index">
					<view class="top">
						<view class="left">
							<view class="imgbox">
								<image :src="'http://img.cpgm.cc/panda/static/home/' + item.img" mode="widthFix" />
							</view>
							<view class="word">
								<p>{{item.name}}</p>
								<p><text>每日领取银元{{item.sign}}个</text>  </p>
								<p>每人限领30天，共{{item.num}}银元</p>
							</view>
						</view>
						<view class="right">
							<text >需达到战力：{{item.need}}</text>
							<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" :class="[item.is_rece?'grey':'']" class="button btn2" @click="receive(item)">领取</u-button>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>


		<u-mask :show="show">
			<view class="warp">
				<view class="maskbox">
					<image class="topimg" src="http://img.cpgm.cc/panda/static/mask/laba.png" mode="widthFix" />
					<view class="wightbg">
						<p>恭喜您成功获得</p>
						<image src="http://img.cpgm.cc/panda/static/self/yb.png" mode="widthFix" />
						<text>{{silver}}银元</text>
					</view>
				</view>
				<view class="mask_btn button" @click="show = false">开心收下</view>
			</view>
		</u-mask>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						img:'1.png',
						name:'士兵熊猫',
						sign:0.4,
						need:1000,
						num:12
					},
					{
						id:2,
						img:'2.png',
						name:'音乐熊猫',
						sign:0.8,
						need:3000,
						num:24
					},
					{
						id:3,
						img:'3.png',
						name:'恐龙熊猫',
						sign:2,
						need:8000,
						num:60
					},
					{
						id:4,
						img:'4.png',
						name:'宇航员熊猫',
						sign:4.8,
						need:20000,
						num:144
					},
					{
						id:5,
						img:'5.png',
						name:'芭比熊猫',
						sign:12,
						need:50000,
						num:360
					},
					{
						id:6,
						img:'6.png',
						name:'花木兰熊猫',
						sign:60,
						need:200000,
						num:1800
					},
					{
						id:7,
						img:'7.png',
						name:'女巫熊猫',
						sign:120,
						need:500000,
						num:3600
					},
					{
						id:8,
						img:'8.png',
						name:'牛魔王熊猫',
						sign:600,
						need:2000000,
						num:18000
					},
					{
						id:9,
						img:'9.png',
						name:'悟空熊猫',
						sign:1200,
						need:5000000,
						num:36000
					},
				],
				level:'',
				userinfo:'',
				show:false,
				silver:'',
			};
		},


		onLoad(){
			this.getUserInfo();
			this.cwgetLvList();
		},
		
		methods: {
			// 请求用户信息接口
			async getUserInfo() {
				let res = await this.$http.index.getUserInfo()
				this.userinfo = res.data
				this.level = res.data.level
			},

			async cwgetLvList(){
				let res = await this.$http.index.cwgetLvList();
				this.list = res.data.map((item , index)=>{
					return {
						...this.list[index],
						...item,
					}
				})
				console.log(this.list);
			},

			receive(item){
				console.log(item);
				if(item.is_rece) {
					this.$u.toast('今日已领取')
				}else{
					this.getLvCrystal(item.fighting)
				}
			},

			async getLvCrystal(fight){
				let res = await this.$http.index.getLvCrystal({
					fight:fight
				})
				
				if(res.code == 1) {
					this.cwgetLvList();
					this.silver = res.silver;
					this.show = true
				}else {
					this.$u.toast(res.msg)
				}
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: linear-gradient(180deg, #005FFE 0%, #2BD2F7 34%, #58F6D9 59%, #28E2F5 70%, #8B66FC 100%);
	min-height: 100vh;
	background-position: center;
}
.main {
	padding: 0px 10px 0;
}
.content {
	height: calc(100vh - 70px - var(--status-bar-height));
	box-sizing: border-box;
}

.title {
	position: relative;
	width: 60%;
	left: 20%;
	image {
		width: 100%;
	}
	text {
		position: absolute;
		right:30%;
		top: 50%;
		transform: translateY(-30%);
		font-size: 16px;
		font-weight: 600;
		width: fit-content;
		color: #FFEEB4;
		line-height: 24px;
		background: linear-gradient(180deg, #FEF6B1 0%, #FFDE9F 48%, #FFFFEB 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.item {
	background: rgba(255,255,255,0.7);
	border-radius: 8px;
	// backdrop-filter: blur(10px);
	padding: 15px 10px;
	margin: 10px 0;

	.button {
		width: 91px;
		height: 34px;
		background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
		border-radius: 5px;
		font-weight: 600;
	}
}

.right {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	flex: 1;

	text {
		position: absolute;
		font-size: 12px;
		margin-bottom: 15px;
		white-space: nowrap;
		top: -20%;
		right: 0;
	}

	.button {
		width: 80px;
		padding: 0 10px;
		display: flex;
		align-items: center;
		background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
		background-size: 100% 100%;
		border-radius: 5px;
		color: #B73800;
		font-size: 14px;
		font-weight: 600;
		margin-top: 15px;
	}
}

.top {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-radius: 5px;
}

.left {
	display: flex;
	align-items: center;

	.imgbox {
		width: 75px;
		height: 75px;
		border-radius: 5px;
		background: #fff;
		margin-right: 8px;
		box-sizing: border-box;

		image {
			width: 100%;
		}
	}

	.word {
		display: flex;
		flex-direction: column;

		p {
			color: #343434;
			font-size: 12px;

			text {
				font-size: 13px;
				font-weight: bold;
				color: #343434;
				line-height: 20px;
				background: linear-gradient(180deg, #FF2F00 0%, #FF8758 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}

		p:nth-child(1) {
			font-size: 19px;
			font-weight: 600;
			color: #111110;
			line-height: 24px;
		}

		p:nth-child(2) {
			margin: 5px 0;
		}
		
	}
}

.botbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	background: #FFF9F3;
	border-radius: 5px;

	view {
		display: flex;
		align-items: center;
		image {
			width: 15px;
			margin-right: 10px;
		}
	}

	text {
		color: #343434;
		font-size: 12px;
		display: flex;
		align-items: center;
		

		image {
			width: 15px;
			margin-right: 2px;
		}
	}

	.button {
		width: 48%;
		height: 38px;
		border-radius: 5px;
	}

	.btn1 {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		text {
			color: #fff;
		}
	}
	.btn2 {
		background: linear-gradient(90deg, #E5BB94 0%, #EEDDCF 100%);
		color: #000000 !important;
	}
}

.grey {
	filter: grayscale(1);
}




// 弹窗

.maskbox {
	background: linear-gradient(180deg, #61FBED 0%, #E4FDFC 31%, #F6FEEB 68%, #F5FEA8 100%);
	box-shadow: inset 5px 5px 47px 0px rgba(255,255,255,0.5), inset -5px -5px 47px 0px rgba(255,255,255,0.5), inset 0px 2px 0px 0px rgba(255,255,255,0.5);
	padding: 15px;
	min-height: 300px;
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;

	.topimg {
		width: 35%;
		margin: 0 auto;
		margin-top: -25%;
	}

	h3 {
		color: #000000;
		font-size: 26px;
	}

	.wightbg {
		width: 100%;
		background: rgba(255, 255, 255, 0.7);
		border-radius: 9px;
		padding: 20px 10px;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;

		p {
			position: relative;
			color: #000000;
			font-size: 20px;
			font-weight: 600;
			z-index: 2;
			padding: 0 10px;
		}

		p::after {
			content: '';
			width: 100%;
			height: 30px;
			background: url('http://img.cpgm.cc/panda/static/mask/banner.png');
			background-size: 100% auto;
			background-position: center;
			background-repeat: no-repeat;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		image {
			width: 30%;
			margin: 10px 0;
		}
		text {
			color: #000000;
			font-size: 20px;
			font-weight: 600;
		}
	}
}

.mask_btn {
	width: 50%;
	height: 58px;
	background: url('http://img.cpgm.cc/panda/static/public/btn2.png');
	background-size: 100% 100%;
	margin: 0 auto;
	margin-top: 30px;
	color: #B73800;
	font-weight: 600;
	font-size: 18px;
}



</style>
